<template>
  <div>
    <div style="text-align: left; margin-bottom: 5px;">
      <el-button size="mini" type="primary" @click="toAdd">添加</el-button>
    </div>

    <!--添加或新增店铺弹窗-->
    <el-dialog :title=formTitle :visible.sync="flagShowForm">
      <el-form :model="formData" label-width="200px" size="mini">
        <el-form-item label="微信支付商户号" required>
          <el-input v-model="formData.wxPayMchId" placeholder="10位数字" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="微信支付apiKey" required>
          <el-input v-model="formData.wxPayApiKey" placeholder="32位字符" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="微信公众号appId" required>
          <el-input v-model="formData.wxGzhAppId" placeholder="18位字符" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="微信公众号appSecret" required>
          <el-input v-model="formData.wxGzhAppSecret" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="微信小程序appId" required>
          <el-input v-model="formData.wxMpAppId" placeholder="18位字符" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="微信小程序appSecret" required>
          <el-input v-model="formData.wxMpAppSecret" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="微信支付tls证书公钥" required>
          <el-input type="textarea" v-model="formData.certPEMPublicKey" maxlength="3000"></el-input>
        </el-form-item>
        <el-form-item label="微信支付tls证书私钥" required>
          <el-input type="textarea" v-model="formData.certPEMPrivateKey" maxlength="3000"></el-input>
        </el-form-item>
        <el-form-item label="商家姓名" required>
          <el-input v-model="formData.merchantName" maxlength="4"></el-input>
        </el-form-item>
        <el-form-item label="打印机编号" required>
          <el-input v-model="formData.printerId" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--列表-->
    <el-table :data="shopList" :default-sort="{prop: 'id'}">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div style="padding:0 10px">
            <div>店铺名字：{{ scope.row.name }}</div>
            <div>店铺状态：{{ scope.row.status }}</div>
            <div>外卖配送费：{{ scope.row.sendingPrice }}</div>
            <div>外卖打包费：{{ scope.row.packingPrice }}</div>
            <div>外卖起送价：{{ scope.row.sendingNeedPrice }}</div>
            <div>开始营业时间：{{ scope.row.startTime }}</div>
            <div>开始歇业时间：{{ scope.row.endTime }}</div>
            <div>联系电话：{{ scope.row.relationPhones }}</div>
            <div>联系QQ：{{ scope.row.relationQQ }}</div>
            <div>联系微信：{{ scope.row.relationWeixin }}</div>
            <div>店铺地址：{{ scope.row.address }}</div>
            <div>店铺公告：{{ scope.row.notice }}</div>
            <div>店铺描述：{{ scope.row.description }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="id" prop="id" sortable></el-table-column>
      <el-table-column label="微信支付商户号" prop="wxPayMchId"></el-table-column>
      <el-table-column label="微信支付apiKey" prop="wxPayApiKey"></el-table-column>
      <el-table-column label="微信公众号appId" prop="wxGzhAppId"></el-table-column>
      <el-table-column label="微信公众号appSecret" prop="wxGzhAppSecret"></el-table-column>
      <el-table-column label="微信小程序appId" prop="wxMpAppId"></el-table-column>
      <el-table-column label="微信小程序appSecret" prop="wxMpAppSecret"></el-table-column>
      <el-table-column label="微信支付tls证书公钥" prop="certPEMPublicKey" show-overflow-tooltip></el-table-column>
      <el-table-column label="微信支付tls证书私钥" prop="certPEMPrivateKey" show-overflow-tooltip></el-table-column>
      <el-table-column label="商家姓名" prop="merchantName"></el-table-column>
      <el-table-column label="店铺名" prop="name"></el-table-column>
      <el-table-column label="打印机编号" prop="printerId"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $dateUtil.fmtDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="50px">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import * as shopAdminApi from "../../api/system/shopAdminApi"

export default {
  data() {
    return {
      formTitle: '添加店铺',
      flagShowForm: false,
      shopList: [], // 店铺列表
      formData: {},
    }
  },
  mounted() {
    this.getShopList()
  },
  methods: {
    getShopList() {
      shopAdminApi.getShopList({
        success: res => {
          this.shopList = res.data
        }
      })
    },
    // 重置表单
    resetForm() {
      this.formData = {
        wxPayMchId: "",
        wxPayApiKey: "",
        wxGzhAppId: "",
        wxGzhAppSecret: "",
        wxMpAppId: "",
        wxMpAppSecret: "",
        certPEMPublicKey: "",
        certPEMPrivateKey: "",
        merchantName: "",
      }
    },
    toAdd() {
      this.resetForm()
      this.flagShowForm = true;
      this.formTitle = '添加店铺';
    },
    toEdit(role) {
      this.formData = JSON.parse(JSON.stringify(role));
      this.flagShowForm = true
      this.formTitle = '更新店铺'
    },
    // 提交表单
    submitForm() {
      if (this.formTitle.startsWith("添加")) {
        shopAdminApi.addShop({
          data: this.formData,
          success: () => {
            this.flagShowForm = false
            this.getShopList()
          }
        })
      } else {
        shopAdminApi.updateShop({
          data: this.formData,
          success: () => {
            this.flagShowForm = false
            this.getShopList()
          }
        })
      }
    },
  }
}
</script>
<style>
</style>
